/**
* 组件-菜单
*
**/
<template>
  <el-scrollbar class="vertical-menus-scrollbar" ref="verticalMenusRef">
    <el-menu
        class="layouts-menu-vertical"
        :collapse-transition="false"
        :unique-opened="false"
        :default-active="state.defaultActive"
        :collapse="config.layout.menuCollapse"
    >
      <menu-item :menus="state.menus"/>
    </el-menu>
  </el-scrollbar>
</template>

<script setup lang='ts'>
import MenuItem from "./MenuItem.vue";
import {useConfig} from '../stores/config'
import {RouteLocationNormalizedLoaded} from "vue-router";
import {ElScrollbar} from "element-plus";

const route = useRoute()
const verticalMenusRef = ref<InstanceType<typeof ElScrollbar>>()

const config = useConfig()

const state = reactive({
  defaultActive: '',
  layoutMode: 'Default',
  menus: [
    {
      children: [],
      component: "/src/pages/home.vue",
      meta: {
        title: '首页',
      },
      name: "home",
      path: "/home"
    },
    {
      component: "/src/pages/user/user.vue",
      meta: {
        title: '用户管理'
      },
      name: "user",
      path: "/user",
      children: [
        {
          component: "/src/pages/user/userList.vue",
          meta: {
            title: '用户信息'
          },
          name: "userList",
          path: "/user/userList"
        }
      ],
    }
  ]
})

// 激活当前路由的菜单
const currentRouteActive = (currentRoute: RouteLocationNormalizedLoaded) => {
  state.defaultActive = currentRoute.path
}


onMounted(() => {
  currentRouteActive(route)
})

onBeforeRouteUpdate((to) => {
  currentRouteActive(to)
})

</script>

<style scoped lang='less'>
.vertical-menus-scrollbar {
  height: calc(10.8rem - 0.5rem);

  .layouts-menu-vertical {
    border: 0;
  }
}


</style>